<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-button
            type="primary"
            @click="add('')"
          >创建关键字</a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
        <a-menu
          v-model="current"
          mode="horizontal"
          @click="handleClick"
        >
          <a-menu-item
            key="1"
          >关键字列表 </a-menu-item>
            <a-menu-item
            key="2"
          >发送记录 </a-menu-item>
        </a-menu>
    <div id="change">
        <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data-source="dataSource"
        @change="handleTableChange"
        :scroll="{ x: true }"
      >
       <span
          slot="status"
          slot-scope="txt, record"
          style="margin-left:5px"
        >
          <span
            class="start"
            v-if="record.status == 0"
          >
            禁用
          </span>
          <span
            class="end"
            v-else
          >
            启用
          </span>
        </span>

       <template
          slot="type"
          slot-scope="txt, record"
        >
        <span v-for="(item,index) in typeList" :key="index">
          <span v-if="item.id == record.type">{{item.title}}</span>
        </span>
       </template>
       <template
          slot="group"
          slot-scope="txt, record"
        >
        <span v-for="(item,index) in personList" :key="index">
          <span v-if="item.id == record.tagGroup">{{item.name}}</span>
        </span>
         <span v-if="record.tagGroup == 0">全部</span>
       </template>
      <span  slot="time"
          slot-scope="txt, record">
          <span v-if="!record.startTime">永久生效</span>
          <span v-else>{{record.startTime}} - {{record.endTime}}</span>
          
      </span>
        <template
          slot="action"
          slot-scope="txt, record"
        >
         <a
            class="mr-10"
            @click="start(record)"
          >
            开启
          </a>
         <a
            class="mr-10"
            @click="add(record)"
          >
            编辑
          </a>
          <a
            class="mr-10"
            @click="toDetail(record)"
          >
            详情
          </a>
          <a
            class="mr-10"
            @click="deleteRecord(record)"
          >
            删除
          </a>
        </template>
      </a-table>
    </div>
    

    </a-card>
      <create
        v-if="showAdd"
        :detail="detail"
        :appid="appid"
        @close="close"
      ></create>
       <detail
        v-if="showDetail"
        :detail="detail"
        :appid="appid"
        @closeDetail="closeDetail"
      ></detail>
  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import create from './create.vue'
import detail from './detail.vue'

const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'id'
  },
   {
    title: '回复关键字',
    dataIndex: 'keyword'
  },
  {
    title: '回复描述',
    dataIndex: 'remark'
  },
  {
    title: '发送对象',
    scopedSlots: { customRender: 'group' }

  },
  {
    title: '回复类型',
    scopedSlots: { customRender: 'type' }

  },
  {
    title: '时间',
    width: 400,
    scopedSlots: { customRender: 'time' }

  },
  
   {
    title: '状态',
    width: 90,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const typeList = [
  {
    id: 1,
    title: '文本消息'
  },
  {
    id: 2,
    title: '单图文'
  },
  {
    id: 3,
    title: '多图文'
  },
  {
    id: 4,
    title: '图片'
  },
  {
    id: 5,
    title: '视频'
  },
  {
    id: 6,
    title: '音频'
  },
    {
    id: 7,
    title: '语音'
  },
  {
    id: 8,
    title: '菜单'
  }
]
export default {
   components: {
    create,
    detail
  },
   props: {
    appid: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      columns,
      personList:[],
      typeList,
      current: ['1'],
      urlKey: 'basemgt-wx',
      dataSource: [],
      loading: false,
      template:'',
      detailid:'',
      detail:{},
      menuList: [],
      showAdd: false,
      showDetail:false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.getPersonList()
    this.loadData()
  },
  watch: {
    appid() {
      this.loadData()
    }
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    start(){
      console.log(111);
    },
    close() {
      this.showAdd = false
      this.loadData()
    },
    add(record) {
      this.showAdd = true
      this.detail = record
    },
    changeMenu() {
      this.loadData()
    },
    toDetail(record){
      this.detail= record
      this.showDetail = true
    },
    closeDetail(){
      this.showDetail = false
    },
     getPersonList(){
      const params = {
        appid: this.appid,
      }
      postAction(`${this.urlKey}/WxTagList/findWxTagListList`, params).then(data => {
        if (data.code == 200) {
          this.personList = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    loadData(key) {
      this.loading = true
      if(key){
        this.pagination.current = 1
      }
      const params = {
        appid: this.appid,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current,
        // type:1
      }
      postAction(`${this.urlKey}/WxKeyword/findWxKeywordListByCondition`, params).then(data => {
        if (data.code == 200) {
          this.dataSource = data.data.records
          this.pagination.total = data.data.total
        } else {
          this.$message.warning(data.msg || data.message)
        }
       
      }) 
      this.loading = false
    },
    handleClick(e) {
      this.type = e.key
      this.pageNum = 1
      this.loadData(1)
    },
    deleteRecord(item) {
      this.$confirm({
        content: '确定要删除' + item.keyword + '吗？',
        onOk: () => {
          const params = {
            id: item.id,
          }
          getAction(`${this.urlKey}/WxKeyword/deleteWxKeywordById`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg || data.message)
            }
          })
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style scoped>
.start{
  position: relative;
    left: 10px;
}
.end{
  position: relative;
    left: 10px;
}
.start::before {
  content: ' ';
  border: 4px solid red;
  border-radius: 4px;
  position: absolute;
  margin-left: -10px;
  margin-top: 6px;
}
.end::before {
  content: ' ';
  border: 4px solid green;
  border-radius: 4px;
  position: absolute;
  margin-left: -10px;
  margin-top: 6px;
}

</style>
<style>
#change .ant-table{
  font-size: 15px!important;
}
</style>
